<template>
  <!-- 故障首页详情列表 -->
  <a-modal :visible="true" :footer="null" :width="1300" @cancel="cancelModel" class="orderModal">
    <div :style="topStyle">
      <div class="infoModal">工单列表</div>
      <div class="table-page-search-wrapper">
        <a-form layout="inline" class="formModel" style="padding:20px 20px 0 20px">
          <a-row :gutter="48">
            <a-col :md="6" :sm="24">
              <a-form-item label="工单流水号">
                <a-input v-model="queryParam.workNo" />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="投诉城市">
                <a-input v-model="queryParam.city" />
              </a-form-item>
            </a-col>

            <a-col :md="6" :sm="24">
              <a-form-item label="故障县市">
                <a-input v-model="queryParam.country" />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="投诉类型一">
                <a-input v-model="queryParam.complaintType1" />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="48">
            <a-col :md="6" :sm="24">
              <a-form-item label="是否超时">
                <a-select v-model="queryParam.overtimeIs" placeholder="请选择">
                  <a-select-option value="是">是</a-select-option>
                  <a-select-option value="否">否</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="是否重客">
                <a-select v-model="queryParam.customerMajorIs" placeholder="请选择">
                  <a-select-option value="是">是</a-select-option>
                  <a-select-option value="否">否</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="数据源">
                <a-select v-model="queryParam.source" placeholder="请选择">
                  <a-select-option value="综资">综资</a-select-option>
                  <a-select-option value="施调">施调</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="派单时间">
                <a-range-picker :ranges="{ Today: [moment(), moment()], 'This Month': [moment(), moment().endOf('month')] }" @change="onChange" />
              </a-form-item>
            </a-col>

          </a-row>
          <a-row :gutter="48">
            <a-col :md="2" :sm="24">
              <a-button type="primary" @click="selectEvnet">查询</a-button>
            </a-col>
            <a-col :md="3" :sm="24">
              <a-button @click="download" type="primary" icon="export" style="margin:0px 0 10px 20px">excel导出</a-button>
            </a-col>
          </a-row>

        </a-form>

      </div>

      <a-table style="margin:0px 20px 20px 20px;color:black" :pagination="pagination" size="small" rowKey="id" :columns="columns" :dataSource="userData" :loading="tableLoading" @change="pageShow">

      </a-table>

      <div style="height:20px"></div>

    </div>
  </a-modal>
</template>

<script>
import moment from 'moment'
import { getComplaintIndexZbDetailList, exportExcelhonmets } from '@/api/public'
import { getNowTime, getNowFormatDate } from '@/utils/util.js'
export default {
  props: ['gzform'],
  data() {
    return {
      readonly: true,
      topStyle: { background: 'white' },
      infoListData: [],
      selectTime: '',
      detailsShow: false,
      vipvisible: false,
      mimavisible: false,
      confirmLoading: false,
      loading: false,
      mdl: {},
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: {},
      kj: '',
      code: '',
      // 表头
      tableLoading: false,
      pwd: '',
      userData: [],
      columns: [
        {
          title: '工单流水',
          dataIndex: 'workNo',
          align: 'center',
        },
        {
          title: '投诉城市',
          dataIndex: 'city',
          align: 'center',
        },
        {
          title: '故障县市',
          dataIndex: 'county',
          align: 'center',
        },

        {
          title: '集团名称',
          dataIndex: 'companyName',
          align: 'center',
        },

        {
          title: '是否超时',
          dataIndex: 'overtimeIs',
          align: 'center',
        },

        {
          title: '投诉类型一',
          dataIndex: 'complaintType1',
          align: 'center',
        },
        {
          title: '集团编号',
          dataIndex: 'companyNo',
          align: 'center',
        },
    
        {
          title: '处理历时',
          dataIndex: 'useLong',
          align: 'center',
        },

        {
          title: '是否重客',
          dataIndex: 'customerMajorIs',
          align: 'center',
        },
        {
          title: '最终满意度',
          dataIndex: 'satisfiedIs',
          align: 'center',
        },
    
        {
          title: '数据源',
          dataIndex: 'source',
          align: 'center',
        },
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: [],
      selectedRowKeys: [],
      selectedRows: [],
      pagination: {
        total: 0,
        showTotal: (total) => `共有 ${total} 条数据`,
      },
      current: 1,
      pageSize: 10,
      ip: '',
      mobile: '',
      status: '',
      id: '',
      hymavisible: false,
      qbvisible: false,
      userInfo: {},
    }
  },
  created() {
    this.queryParam = {}
    this.queryParam.type = this.gzform.type
    this.queryParam.startTime = getNowFormatDate()+" 00:00:00"
    this.queryParam.endTime = getNowFormatDate()+" 23:59:59"
    this.queryParam.current = this.current
    this.queryParam.pageSize = this.pageSize
    var that = this
    document.onkeydown = function (e) { 
      let e1 = e || event || window.event || arguments.callee.caller.arguments[0]
      if (e1 && e1.keyCode == 13) {
        that.selectEvnet() 
      } 
    }
  },
  mounted() {
    this.getComplaintIndexZbDetailListInfo()
  },

  methods: {
    //键盘监听
    handleKeyDown(e) {
      let key = null
      if (window.event === undefined) {
        key = e.keyCode
      } else {
        key = window.event.keyCode
      }
      if (key === 13) {
        //触发的事件
        this.selectEvnet()
      }
    },
    cancelModel() {
      this.$emit('cancelEvent')
    },
    //文档导出
    download() {
      exportExcelhonmets(this.queryParam)
        .then((response) => {
          let blob = new Blob([response], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
          let url = window.URL.createObjectURL(blob)
          let aLink = document.createElement('a')
          aLink.style.display = 'none'
          aLink.href = url
          aLink.setAttribute('download', '详情列表.xlsx')
          document.body.appendChild(aLink)
          aLink.click()
          document.body.removeChild(aLink)
          window.URL.revokeObjectURL(url)
          this.$message.success(`文件已导出`)
        })
        .catch((error) => {})
    },
    //查询
    selectEvnet() {
      this.queryParam.current=1
      this.getComplaintIndexZbDetailListInfo()
    },
    moment,
    //获取表格数据
    getComplaintIndexZbDetailListInfo() {
      this.tableLoading = true
      getComplaintIndexZbDetailList(this.queryParam)
        .then((response) => {
          const pagination = { ...this.pagination }
          pagination.total = response.data.total
          pagination.pageSize = this.pageSize
          this.pagination = pagination
          this.pagination.current = response.data.current
          this.userData = response.data.records
          this.tableLoading = false
        })
        .catch((error) => {
          this.tableLoading = false
        })
    },
    //分页
    pageShow(pagination) {
      this.tableLoading = true
      this.queryParam.current = pagination.current
      this.queryParam.pageSize = pagination.pageSize
      getComplaintIndexZbDetailList(this.queryParam)
        .then((response) => {
          const pagination = { ...this.pagination }
          pagination.total = response.data.total
          pagination.pageSize = this.pageSize
          this.pagination = pagination
          this.pagination.current = response.data.current
          this.userData = response.data.records
          this.tableLoading = false
        })
        .catch((error) => {
          this.tableLoading = false
        })
    },
    onChange(date, dateString) {
      this.queryParam.sendStartTime = dateString[0] + ' 00:00:00'
      this.queryParam.sendEndTime = dateString[1] + ' 23:59:59'
    },
    detailsShowEvent(info) {
      this.infoListData = info
      this.detailsShow = true
    },
    cancelEvent() {
      this.detailsShow = false
    },
    resetSearchForm() {
      this.queryParam = {
        date: moment(new Date()),
      }
    },
  },
}
</script>
<style scoped>
.infoModal {
  height: 51px;
  background: #f6f6f6;
  border-bottom: 1px solid #f6f6f6;
  border-radius: 6px 6px 0px 0px;
  text-align: center;
  line-height: 51px;
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: bold;
  color: rgba(0, 0, 0, 1);
}
</style>
